<template>
  <div class="site-wrapper" :class="{ 'site-sidebar--fold': sidebarFold }" v-loading.fullscreen.lock="loading"
    :element-loading-text="loadingText">
    <template v-if="!loading">
      <main-navbar />
      <main-sidebar />
      <!--      <div class="site-content__wrapper" :style="{ 'min-height': documentClientHeight + 'px' }">
        <main-content/>
      </div> -->
      <div class="site-content__wrapper" style="height: calc(100vh - 130px);min-height: 496px;">
        <main-content />
      </div>
    </template>
    <audio id="audio" muted src="" />
    <AddOrUpdate v-if="addOrUpdateVisible" ref="addOrUpdate"></AddOrUpdate>
  </div>
</template>

<script>
  import MainNavbar from "./main-navbar";
  import MainSidebar from "./main-sidebar";
  import MainContent from "./main-content";
  import AddOrUpdate from "../views/modules/app/order/hotelorder-add-or-update";
  export default {
    data() {
      return {
        loading: true,
        time:0,
        loadingText: '拼命加载中',
        addOrUpdateVisible: false,
        websocket: ""
      };
    },
    components: {
      MainNavbar,
      MainSidebar,
      MainContent,
      AddOrUpdate
    },
    computed: {
      documentClientHeight: {
        get() {
          return this.$store.state.common.documentClientHeight;
        },
        set(val) {
          this.$store.commit("common/updateDocumentClientHeight", val);
        }
      },
      sidebarFold: {
        get() {
          return this.$store.state.common.sidebarFold;
        }
      },
      userId: {
        get() {
          return this.$store.state.user.id;
        },
        set(val) {
          this.$store.commit("user/updateId", val);
        }
      },
      userName: {
        get() {
          return this.$store.state.user.name;
        },
        set(val) {
          this.$store.commit("user/updateName", val);
        }
      }
    },
    created() {},
    mounted() {
      this.resetDocumentClientHeight();
      this.getUserInfo();
      // this.$notify({
      //   title: "订单提醒",
      //   dangerouslyUseHTMLString: true,
      //   message: `<div>123</div>`,
      //   duration: 0,
      //   onClick: (e) => {
      //     this.$router.push({
      //       name: "酒店订单"
      //     });
      //   }
      // });
    },
    watch: {
      status: function(value) {
        this.getCaptcha();
      }
    },
    methods: {
      init(userId) {
        if (typeof WebSocket === "undefined") {
          alert("您的浏览器不支持socket");
        } else {
          let domain =
            window.SITE_CONFIG["baseUrl"].indexOf("https") > 0 ?
            window.SITE_CONFIG["baseUrl"].replace(/https/g, "wss") :
            window.SITE_CONFIG["baseUrl"].replace(/http/g, "ws");

          // 实例化socket
          this.socket = new WebSocket(`${domain}/websocket/${userId}`);
          // 监听socket连接
          this.socket.onopen = this.open;
          // 监听socket错误信息
          this.socket.onerror = this.error;
          // 监听socket消息
          this.socket.onmessage = this.getMessage;
        }
      },
      // 重置窗口可视高度
      resetDocumentClientHeight() {
        this.documentClientHeight = document.documentElement["clientHeight"];
        window.onresize = () => {
          this.documentClientHeight = document.documentElement["clientHeight"];
        };
      },
      // 获取当前管理员信息
      getUserInfo() {
        this.$http({
          url: this.$http.adornUrl("/sys/user/info"),
          method: "get",
          params: this.$http.adornParams()
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.loading = false;
            this.userId = data.user.userId;
            this.userName = data.user.username;
            this.init(data.user.userId);
          }
        });
      },

      open: function() {
        console.log("socket连接成功");
      },
      error: function() {
        console.log("连接错误");
      },
      //铃声
      aplayAudio() {
        const audio = document.getElementById("audio");
        audio.play();
      },
      getMessage: function(msg) {
        console.log("socket",msg)
        if (msg.data.indexOf('NightTrialTask：') != -1) {
          var audioPath = "http://downsc.chinaz.net/Files/DownLoad/sound1/201609/7815.wav";
          if (msg.data.indexOf('正在夜审') != -1) {
            this.loading = true;
            this.loadingText = msg.data.replace('NightTrialTask：', '')

          } else {
            this.loading = false;
            this.loadingText = '正在拼命加载'
            const notify = this.$notify({
              title: "夜审提醒",
              dangerouslyUseHTMLString: true,
              message: `<div>${msg.data.replace('NightTrialTask：', '')}</div>`,
              duration: 1500,
              onClick: (e) => {
                notify.close()
              }
            });
          }
          this.$nextTick(function() {
            const audio = document.getElementById("audio");
            audio.setAttribute("src", audioPath)
            audio.play();
          });
        } else if (msg.data.indexOf('SEND_SMS') != -1) {
          if (msg.data.indexOf('【state：ok】') != -1) {
            this.$message({
              message: `${msg.data.replace('SEND_SMS：', '').replace('【state：ok】', '')}`,
              type: 'success'
            });
          } else {
            this.$message.error(`${msg.data.replace('SEND_SMS：', '')}`);
          }
        } else {
          console.log(msg)
          var audioPath = ""
          var audio1 = ""
          var audio2 = ""
          var audio3 = ""
          //获取设置的铃声
          this.$http({
            url: this.$http.adornUrl("/hotel/hotelordernotification/audio"),
            method: "get",
            params: this.$http.adornParams()
          }).then(({
            data
          }) => {
            if (data && data.code === 0) {
              const entity = data.entity
              if (entity.pcAudio == 1) {
                audio1 = entity.audio1Path
                audio2 = entity.audio2Path
                audio3 = entity.audio3Path
              }
              console.log(msg)
              //取消订单提醒
              audioPath = audio1
              if (msg.data.indexOf('您有一条酒店订单已被取消') != -1) {
                audioPath = audio2
              }
              if (msg.data.indexOf('自动为您接单了') != -1) {
                audioPath = audio3
              }
              const notify = this.$notify({
                title: "订单提醒",
                dangerouslyUseHTMLString: true,
                message: `<div>${msg.data}</div>`,
                duration: 0,
                onClick: (e) => {
                  this.$router.push({
                    name: "酒店订单"
                  });
                  notify.close()
                }
              });
              this.$nextTick(function() {
                const audio = document.getElementById("audio");
                audio.setAttribute("src", audioPath)
                audio.play();
              });
            }
          });
        }
      },
      send: function() {
        this.socket.send(this.params);
      },
      close: function() {
        console.log("socket已经关闭");
      }
    }
  };
</script>
